<!--
 * @Author: zhangwei 1405298045@qq.com
 * @Date: 2022-02-28 14:30:49
 * @LastEditTime: 2022-04-21 11:55:18
 * @LastEditors: zhangwei 1405298045@qq.com
 * @Description: 
 * @FilePath: /ll-fe-mp-dyfx/src/materialPage/MaterialFeatured.vue
 *  
-->
<template>
	<view class="MaterialFeatured">
		<view :style="[headerStyle]" class="MaterialFeatured-header">
			<view class="MaterialFeatured-header-left">
				<image class="MaterialFeatured-header-left-image" :src="closeIcon" @click.passive.stop="closePopup" />
			</view>
			<view class="MaterialFeatured-header-center">
				<view class="MaterialFeatured-header-center-text">作品精选</view>
			</view>
		</view>

		<view class="MaterialFeatured-main">
			<swiper
				vertical
				:style="[mainStyle]"
				:duration="duration"
				:circular="circular"
				:current="current"
				@change="changeCurrentIndex"
				v-if="swiperList.length"
			>
				<swiper-item v-for="(item, index) of pageSize" :key="index">
					<view class="MaterialFeatured-main-item" :style="[mainItemStyle]">
						<video
							loop
							show-loading
							object-fit="fill"
							:style="{
								height: formatFeatured[swiperList[index]].height
							}"
							:controls="controls"
							:id="componentName + index"
							play-btn-position="center"
							:enable-progress-gesture="false"
							:show-center-play-btn="showCenterPlayBtn"
							:poster="formatFeatured[swiperList[index]].coverUrl"
							:src="current === index && videlUrlList[swiperList[index]]"
							:poster-for-crawler="formatFeatured[swiperList[index]].coverUrl"
						/>

						<!-- <image :src="formatFeatured[swiperList[index]].coverUrl" mode="aspectFill" /> -->

						<view class="MaterialFeatured-main-item-footer">
							<view class="MaterialFeatured-main-item-footer-info">
								<view class="MaterialFeatured-main-item-footer-info-left">
									<image
										:src="formatFeatured[swiperList[index]].headImgUrl"
										class="MaterialFeatured-main-item-footer-info-left-image"
									/>
								</view>

								<view class="MaterialFeatured-main-item-footer-info-conter">
									<view class="MaterialFeatured-main-item-footer-info-conter-name">
										{{ formatFeatured[swiperList[index]].nickname }}
									</view>

									<view class="MaterialFeatured-main-item-footer-info-conter-fan">
										{{ formatFeatured[swiperList[index]].channelFens }} 粉丝
									</view>
								</view>

								<view class="MaterialFeatured-main-item-footer-info-right">
									<image
										src="@/static/icon/icon_zpjx_video_money.png"
										class="MaterialFeatured-main-item-footer-info-right-image"
									/>
									<view class="MaterialFeatured-main-item-footer-info-right-income">收益</view>

									<!-- #ifdef APP-PLUS -->
									<view class="MaterialFeatured-main-item-footer-info-right-line" />
									<!-- #endif -->

									<view class="MaterialFeatured-main-item-footer-info-right-mask">￥</view>
									<view class="MaterialFeatured-main-item-footer-info-right-money">
										{{ formatFeatured[swiperList[index]].formatMoney }}
									</view>
								</view>
							</view>

							<view class="MaterialFeatured-main-item-footer-introduce">
								<view class="MaterialFeatured-main-item-footer-introduce-text">
									{{ formatFeatured[swiperList[index]].productTitle }}
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
import { getMaterialFeaturedWorks } from '@/api';
import { getVideoPreviewUrl } from '@/api/material';
import { getDomeInfo, getSystemInfo, defaultImageUrl } from '@/utils';

const pageSize = Object.freeze(5);
const averageValue = Math.floor(pageSize / 2);
const componentName = Object.freeze('MaterialFeatured');
const { platform, screenWidth, screenHeight } = getSystemInfo();
const closeIcon = Object.freeze(`${defaultImageUrl}icon/iconpicclose.png`);

export default {
	name: componentName,

	data() {
		return {
			pageSize,
			closeIcon,
			componentName,

			duration: 500,
			controls: false,
			circular: false,
			footerHeight: 0,

			swiperList: [],

			current: 0,
			currentIndex: 0,
			showCenterPlayBtn: false,

			videlUrlList: [],
			videoContextList: [],

			requestParams: {
				pageIndex: 1,
				pageSize: 10
			}
		};
	},

	onLoad(params) {
		const { index, workId } = params;

		this.currentIndex = index * 1;
		this.initSwiperList();

		this.$nextTick((e) => {
			getDomeInfo.call(this, '.MaterialFeatured-main-item-footer', false).then((res) => {
				const { height } = res;

				this.footerHeight = height;
			});
		});
	},

	onUnload() {
		const { current, videoContextList } = this;

		videoContextList[current].stop();
	},

	watch: {
		swiperList(formatList) {
			const { videoContextList } = this;

			if (!videoContextList.length) {
				this.videoContextList = formatList.map((item, index) => {
					const videoId = `${componentName}${index}`;

					return uni.createVideoContext(videoId, this);
				});
			}

			this.getCalculateVideoUrl();
		}
	},

	computed: {
		...mapGetters(['currentSite']),

		temporaryFeaturedWorks() {
			const { featuredWorks } = this.$store.state.temporary;

			return featuredWorks;
		},

		listTotal() {
			const {
				temporaryFeaturedWorks: { total }
			} = this;

			return total;
		},

		formatFeatured() {
			const {
				temporaryFeaturedWorks: { list }
			} = this;

			return list;
		},

		headerStyle() {
			const height = platform === 'ios' ? 44 : 48;

			return {
				paddingTop: `${height}px`
			};
		},

		mainStyle() {
			return {
				height: `${screenHeight}px`,
				width: `${screenWidth}px`
			};
		},

		mainItemStyle() {
			const { footerHeight, mainStyle } = this;

			return {
				...mainStyle,
				paddingBottom: `${footerHeight}px`
			};
		}
	},

	methods: {
		...mapMutations(['changeFeaturedWorks']),

		initSwiperList() {
			const { listTotal, swiperList, currentIndex, pageSize, formatFeatured, requestParams } = this;

			if (swiperList.length) {
				return;
			}

			const isAll = listTotal === formatFeatured.length;

			let indexList = [];
			if (!currentIndex && !isAll) {
				indexList = formatFeatured.slice(currentIndex, pageSize).map((item) => item.index);
			} else {
				let startIndex = null;
				let end = null;

				const diffStart = currentIndex - averageValue;
				startIndex = diffStart >= 0 || isAll ? diffStart : 0;

				const diffEnd = currentIndex + averageValue + 1;

				if (startIndex < 0) {
					const endList = formatFeatured.slice(startIndex).map((item) => item.index);
					const startList = formatFeatured.slice(0, diffEnd).map((item) => item.index);

					indexList = [...endList, ...startList];
				} else {
					indexList = formatFeatured.slice(startIndex, diffEnd).map((item) => item.index);
				}
			}

			this.current = indexList.findIndex((item) => item === currentIndex);

			this.swiperList = indexList;
			this.requestParams.pageIndex = Math.ceil(formatFeatured.length / requestParams.pageSize);
		},

		changeCurrentIndex(params) {
			const { current } = params.detail;
			const {
				listTotal,
				pageSize,
				swiperList,
				formatFeatured,
				videoContextList,
				lastIndex = this.current,
				requestParams: { pageIndex }
			} = this;

			videoContextList[lastIndex].stop();

			const singleVideo = videoContextList[current];

			singleVideo.seek(0);
			singleVideo.play();

			this.lastIndex = current;
			const listLength = formatFeatured.length;

			if (listLength <= pageSize) {
				return;
			}

			let realIndex = 0;
			let singleValue = null;

			let isLeft = current - lastIndex === 1 || (lastIndex + 1 === pageSize && !current);

			if (isLeft) {
				realIndex = current + averageValue;

				let singleIndex = swiperList[current] + averageValue;

				if (singleIndex >= listLength) {
					singleIndex = singleIndex - listLength;
				}

				singleValue = formatFeatured[singleIndex].index;

				if (realIndex >= pageSize) {
					realIndex = realIndex - pageSize;
				}
			} else {
				realIndex = current - averageValue;

				let singleIndex = swiperList[current] - averageValue;

				if (singleIndex < 0) {
					singleIndex = formatFeatured.length + singleIndex;
				}

				singleValue = formatFeatured[singleIndex].index;
			}

			swiperList.splice(realIndex, 1, singleValue);

			const isAll = listTotal === listLength;

			this.current = current;
			this.circular = isAll || !!swiperList[current];

			if (listLength - swiperList[current] < 5 && listTotal > listLength) {
				this.getFeaturedWorks(pageIndex + 1);
			}
		},

		closePopup() {
			uni.navigateBack();
		},

		getCalculateVideoUrl() {
			const { current, swiperList, videlUrlList, formatFeatured } = this;

			swiperList.forEach(async (item) => {
				const isStatus = videlUrlList[item];

				if (!isStatus) {
					const { resourceId } = formatFeatured[item] || {};
					const { data } = await getVideoPreviewUrl({ resourceId });

					this.$set(videlUrlList, item, data);
				}
			});

			this.$nextTick(() => {
				setTimeout((e) => {
					this.videoContextList[current].play();
				}, 100);
			});
		},

		async getFeaturedWorks(pageIndex = this.requestParams.pageIndex) {
			const {
				currentSite: { id },
				requestParams: { pageSize }
			} = this;

			const params = {
				pageSize,
				pageIndex,
				locationId: id
			};

			const { code, data } = await getMaterialFeaturedWorks(params);

			if (code !== 200) {
				return;
			}

			const isPageIndex = pageIndex === 1;
			const { list, total } = data || {};

			this.requestParams.pageIndex = pageIndex;

			const formatList = isPageIndex ? list || [] : [...this.formatFeatured, ...(list || [])];

			this.changeFeaturedWorks({
				total,
				list: formatList
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.MaterialFeatured {
	&-main {
		&-item {
			overflow: hidden;
			position: relative;
			background: #000;

			display: flex;
			align-items: center;
			justify-content: center;

			// > image {
			// 	position: absolute;
			// 	left: 0;
			// 	top: 0;
			// 	z-index: -1;
			// 	width: 100%;
			// 	height: 100%;
			// 	filter: blur(28rpx);
			// }

			// &::after {
			// 	content: '';
			// 	position: absolute;
			// 	left: 0;
			// 	top: 0;
			// 	z-index: -1;
			// 	width: 100%;
			// 	height: 100%;
			// 	background: rgba(0, 0, 0, 0.4);
			// 	backdrop-filter: blur(6rpx);
			// }

			video {
				width: 100%;
				max-height: 100%;
			}

			&-footer {
				position: absolute;
				left: 0;
				width: 100vw;
				bottom: 0;
				z-index: 99999;
				@include Db_iosBottomDistance(24rpx);
				background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);

				&-info {
					margin-top: 27px;
					padding-left: 14px;
					padding-right: 14px;

					height: 72rpx;
					// #ifndef APP-PLUS
					display: flex;
					box-sizing: border-box;
					// #endif
					justify-content: flex-start;
					align-items: center;
					flex-direction: row;

					&-left {
						&-image {
							width: 36px;
							height: 36px;
							border-radius: 50%;

							border-width: 1px;
							border-style: solid;
							border-color: #fff;
						}
					}

					&-conter {
						flex: 1;
						padding-left: 10px;
						// #ifndef APP-PLUS
						display: flex;
						// #endif
						flex-direction: column;

						&-name {
							color: #fff;
							font-size: 14px;
							font-weight: 500;
						}

						&-fan {
							color: #fff;
							height: 14px;
							font-size: 10px;
							margin-top: 4px;
						}
					}

					&-right {
						height: 24px;

						padding: 0 4px;
						border-radius: 4px;

						// #ifndef APP-PLUS
						display: flex;
						align-items: inherit;
						vertical-align: bottom;
						// #endif

						// #ifdef APP-PLUS
						align-items: flex-end;
						// #endif

						flex-direction: row;

						background-color: rgba(0, 0, 0, 0.4);

						&-image {
							width: 18px;
							height: 18px;
							margin-right: 4px;
							// #ifdef APP-PLUS
							margin-bottom: 3px;
							// #endif
						}

						&-income {
							color: #fff;
							font-size: 12px;
							padding-right: 6px;
							position: relative;
							// #ifdef APP-PLUS
							padding-bottom: 2.5px;
							// #endif

							// #ifndef APP-PLUS
							&::before {
								content: '';
								position: absolute;
								top: 50%;
								right: 0;
								width: 1px;
								height: 10px;

								transform: translateY(-50%);
								background: rgba(255, 255, 255, 0.4);
							}
							// #endif
						}

						// #ifdef APP-PLUS
						&-line {
							width: 1px;
							height: 10px;
							margin-bottom: 6px;
							background-color: rgba(255, 255, 255, 0.4);
						}
						// #endif

						&-mask {
							color: #fff;
							font-size: 10px;
							font-weight: 500;
							margin-left: 6px;
							padding-top: 10rpx;

							// #ifdef APP-PLUS
							padding-bottom: 3px;
							// #endif
						}

						&-money {
							color: #fff;
							font-size: 18px;
							font-weight: bold;
							font-family: font-number;
						}
					}
				}

				&-introduce {
					padding-left: 28rpx;
					padding-top: 32rpx;
					padding-right: 28rpx;
					padding-bottom: 24rpx;

					&-text {
						lines: 3;
						color: #fff;
						font-weight: 500;
						font-size: 24rpx;
						line-height: 34rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						// #ifndef APP-PLUS
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						// #endif
					}
				}
			}
		}
	}

	&-header {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 99;
		height: 88px;
		padding-top: 44px;

		// #ifndef APP-PLUS
		box-sizing: border-box;
		// #endif

		// #ifndef APP-PLUS
		display: flex;
		// #endif
		flex-direction: row;
		background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);

		&-left {
			width: 60px;
			padding-left: 12px;

			// #ifndef APP-PLUS
			display: flex;
			// #endif
			align-items: center;

			&-image {
				width: 48px;
				height: 32px;
			}
		}

		&-center {
			flex: 1;
			font-size: 36rpx;

			// #ifndef MP-WEIXIN
			padding-right: 60px;
			// #endif

			// #ifndef APP-PLUS
			display: flex;
			// #endif
			flex-direction: row;
			align-items: center;
			justify-content: center;

			&-text {
				color: #fff;
				font-weight: 500;

				// #ifdef MP-WEIXIN
				margin-right: 60px;
				// #endif
			}
		}
	}
}
</style>
